<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				/*
				 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
				 ！！渐变是图片，需要通过background-image来设置而不是用背景颜色
				 
				 * 线性渐变，颜色沿着一条直线发生变化
				 *  linear-gradient（）
				 * 
				 * linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域
				 * -线性渐变的开头，我们可以指定一个渐变的方向
				 *    to left
				 *    to right
				 *    to bottom
				 *	  to top
				 *    deg表示度数
				 *    turn表示圈
				 * 
				 * -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
				 *   也可以手动指定渐变的分布情况
				 * 
				 * repeating-linear-gradient（）可以平铺的线性渐变*/
				/*background-image: linear-gradient(#fff,pink);*/
				background-image: repeating-linear-gradient(skyblue,pink 80px);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
